import { useEffect } from 'react';
import { useGameStore } from './store/gameStore';
import { GamePhase } from './types';
import GameSetup from './components/UI/GameSetup';
import CharacterSelect from './components/UI/CharacterSelect';
import GameScreen from './components/UI/GameScreen';
import GameOver from './components/UI/GameOver';
import { hasSavedGame, loadGameFromStorage } from './utils/storage';

function App() {
  const game = useGameStore(state => state.game);
  const actions = useGameStore(state => state.actions);

  useEffect(() => {
    // 检查是否有保存的游戏
    if (hasSavedGame()) {
      const savedGame = loadGameFromStorage();
      if (savedGame) {
        const shouldRestore = window.confirm('检测到未完成的游戏，是否继续？');
        if (shouldRestore) {
          // 直接设置游戏状态
          useGameStore.setState({ game: savedGame });
        }
      }
    }
  }, []);

  // 根据游戏阶段渲染不同界面
  if (!game) {
    return <GameSetup />;
  }

  switch (game.phase) {
    case GamePhase.SETUP:
      return <GameSetup />;
    
    case GamePhase.CHARACTER_SELECT:
      return <CharacterSelect />;
    
    case GamePhase.PLAYING:
      return <GameScreen />;
    
    case GamePhase.GAME_OVER:
      return <GameOver />;
    
    default:
      return <GameSetup />;
  }
}

export default App;
